<script setup lang="ts">
import ProcessSteps from "~/components/ProcessSteps.vue";

const defaultForm={
  type:0,
};
const reasonList=reactive([
  {label:'续费价格太高',value:1},
  {label:'解析不稳定',value:2},
  {label:'功能不够',value:3},
  {label:'交易不太方便',value:4},
  {label:'域名出错了',value:5},
  {label:'其他',value:6},
]);
const businessList=reactive([
  {label:'阿里云[国内]',value:1},
  {label:'gname[国际]',value:2},
]);
const typeList=reactive([
  {label:'快速转出',value:1,desc:'操作简单',desc1:'1小时完成'},
  {label:'普通转出',value:2,desc:'全程获取转移码，一般7天完成',desc1:''},
  {label:'转入原注册厂商',value:3,desc:'原注册商若无账号请自行注册',desc1:''},
])
const form=reactive({...defaultForm});
const step=ref(0);
function next(num:number) {
  step.value+=num;
}
function stepChange(index:number) {
  form.type=index;
  next(1);
}
function handleSelectionChange() {
  
}
</script>

<template>
  <div>
    <AuthenText>
<pre>
  转出说明：
1、转出域名，是指把在本站管理的域名，转出本站，转到其它注册商进行管理。
2、转出成功后您将自行到新的注册商管理该域名，本站也会删除该域名的记录。
3、本站会在转出成功的第7天清空解析记录，请您尽快在您转入的注册商处设置DNS解析，由于未按时解析导致的问题本站一概不负责！
</pre>
    </AuthenText>
<AuthenText v-if="step==2">
  <div class="text-gray-400">
    温馨提示：本次共提交<span class="text-red-400">(1)</span>个域名，验证通过<span class="text-red-400">(1)</span>个，已选中<span class="text-red-400">(1)</span>个,共需转出费用<span class="text-red-400">(1)</span>元,请选择需要转出的域名后点击提交!
  </div>
</AuthenText>
    <el-card>
      <el-steps :active="step" align-center>
        <el-step title="步骤1" description="选择转出方式"></el-step>
        <el-step title="步骤2" description="填写转出信息"></el-step>
        <el-step title="步骤3" description="转出状态查询"></el-step>
      </el-steps>
    </el-card>
    <el-card>
      <el-form v-if="step<2" class="w-5/7 ml-40" label-width="120" label-suffix="：">
        <el-form-item label="转出方式" v-if="step==0">
          <div class="grid grid-cols-3 gap-2.5 text-center">
            <div @click="stepChange(item.value)" v-for="(item,ind) in typeList" class="border border-solid border-gray-300 p-2 hover:border-red-300 " :class="{active:ind==form.type}">
              <div class="text-[var(--el-color-primary)]">{{ item.label }}</div>
              <div>{{ item.desc }} <span class="text-red-400">{{ item.desc1 }}</span></div>
            </div>
          </div>
        </el-form-item>
        <template v-else>
          <el-form-item label="转出方式">
            <div class="flex w-full">
              <div class="w-1/2">
                <el-select placeholder="请选择转出方式" v-model="form.type">
                  <el-option v-for="item in typeList" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="text-gray-400 ml-2" v-if="form.type!=1">
                如果您不想等待或您不想操作/不明白怎么操作，请选择快速转出。
              </div>
            </div>


          </el-form-item>
          <el-form-item label="域名">
            <div class="grid grid-cols-3 gap-1 w-1/2">
              <div class="col-span-3">
                <el-input type="textarea" placeholder="请输入您提供的域名，每行一个，最多100个"></el-input>
              </div>
            </div>

          </el-form-item>
          <el-form-item label="转出原因">
            <el-checkbox-group>
              <el-checkbox :label="item.label" :value="item.value" v-for="item in reasonList">{{item.label}} </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <template v-if="[1,3].includes(form.type)">
            <el-form-item label="转入注册商" v-if="[1].includes(form.type)">
              <el-select>
                <el-option :label="item.label" :value="item.value" v-for="item in reasonList">{{item.label}} </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="转入账户信息" v-if="[3].includes(form.type)">
              <div>
                <div><NuxtLink class="text-[var(--el-color-primary)]">[设置转入账户信息]</NuxtLink></div>
                <div>以便我们把域名PUSH到您的外部账户，如果没有账户，请您自行到注册商网站注册账号。</div>
              </div>
            </el-form-item>
          </template>
          <el-form-item label="温馨提示">
            <div class="text-red-400">由于本站特殊性，一旦申请转出，无法自行取消。(域名将被锁定，无法进行其它操作，直到您转出完毕！)</div>
          </el-form-item>
        </template>

      </el-form>
      <el-table v-if="step==2"
          ref="multipleTable"
          :data="[{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="域名"
            >
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
            label="方式"
            >
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="注册商"
            >
        </el-table-column>
        <el-table-column
            prop="name"
            label="费用"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="验证结果"
        >
        </el-table-column>
      </el-table>
      <div class="pl-52" v-if="step>0"><el-button type="primary" @click="next(1)">{{step==1?'下一步':'提交'}}</el-button><el-button @click="next(-1)">上一步</el-button></div>
    </el-card>
    <el-card v-if="step==1">
      <div class="font-bold text-base mb-1">转出流程</div>
      <ProcessSteps v-if="form.type==1" class="my-4" title="快速转出流程" :steps="['申请快速转出','转入新注册商','域名转入成功','PUSH到内账户','快速转出成功']" />
      <ProcessSteps v-if="form.type==2" class="my-4" title="普通转出流程" :steps="['申请普通转出','发送转移密码','自行转出域名','普通转出成功']" />
      <ProcessSteps v-if="form.type==3" class="my-4" title="国内域名" :steps="['申请转入原注册商','PUSH到您账户','转入原注册商完成']" />
    </el-card>
    <el-card class="mt-4" v-if="[0,1].includes(step)">
      <div>常见问题</div>
      <div class="font-bold my-1">什么是快速转出？</div>
      <div class="text-sm text-gray-400">快速转出申请后您只需要等待，我们系统会自动将域名转入到新的注册商，转入成功后将域名PUSH到您的该注册商账户，给您节省了很多时间。</div>
      <div class="font-bold my-1">快速转出为什么要付费？</div>
      <div class="text-sm text-gray-400">申请快速转出大部分您需要支付域名转入费用，转入成功后域名会续费1年[特殊情况除外]，所付费用相当于域名续费1年的费用。</div>
      <div class="font-bold my-1">快速转出在完成转出时间需要多久？</div>
      <div class="text-sm text-gray-400">这个需要根据域名原[所在]注册商决定，部分注册商可以1小时内完成转出。</div>
      <div class="font-bold my-1">普通转出与快速转出区别在哪？</div>
      <div class="text-sm text-gray-400">普通转出全程获取转移密码，转入域名全程需要您自行操作，非常费时间，并且普通转出域名一般都需要7天时间。</div>
      <div class="font-bold my-1">新注册的域名可以申请转出吗？</div>
      <div class="text-sm text-gray-400">注册时间未满60天，无法进行转出。</div>
      <div class="font-bold my-1">普通转出申请后，转移密码发送到哪？</div>
      <div class="text-sm text-gray-400">本站会在0-7个工作日内把转移密码发送到您的账户注册邮箱，请注意查收。</div>
      <div class="font-bold my-1">转出过程中会影响网站访问吗？</div>
      <div class="text-sm text-gray-400">转出过程中域名解析不会改变，所以不影响您的网站访问。</div>
      <div class="font-bold my-1">刚续费成功的域名可以转出吗？</div>
      <div class="text-sm text-gray-400">可以，但是国际域名续费60天内转入到新注册商，可能会产生“续费掉年”现象，请谨慎操作！</div>
      <div class="font-bold my-1">什么是转入原注册商？</div>
      <div class="text-sm text-gray-400">域名转入注册商，是指把域名转入到，您在该域名注册商处的账号内(如果没有，需要您自行注册账号)</div>
    </el-card>
  </div>

</template>

<style scoped lang="scss">
.index{
  border:1px solid;
  color:var(--el-color-primary);
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: inline-block;
  @apply bg-blue-100;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  margin-top: 20px;
}
.active{
  @apply border-red-300;
}
</style>